<template>
  <div>
    <lyg-nav></lyg-nav>
    <waves></waves>
    <div class="container">
      <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
    </div>
  </div>
</template>

<script>
import header from '@/components/header.vue'
import articlelist from '@/components/articlelist.vue'
import rightlist from '@/components/rightlist.vue'
import {getCategoryList,getCategoryCount} from '../../api/category/category'

export default {
  name: 'hello',
  components: {
    'lyg-nav': header,
    'lyg-articlelist': articlelist,
    'lyg-rightlist': rightlist,
  },
  data () {
    return {
      msg: 'Welcome to kalacloud.com',
      getShowData: [] // 添加一个用于存储数据的数组
    }
  },
  mounted(){
    this.getData();// 获取数据
  },
  methods: {
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        title: {
          text: '文章分类统计图',
          left: 'center', // 设置标题水平居中
          top: 'top', // 设置标题垂直居中
          textStyle: {
            fontSize: 22 // 设置标题字体大小
          }
        },
        tooltip: {},
        series: [{
          name: '数量',
          type: 'pie',
          data: this.getShowData, // 使用this.getShowData中的数据绘制图表
          label: {
            fontSize: 18, // 设置标签字体大小
          }
        }],
      });

      // 添加点击事件监听器
      myChart.on('click', (params) => {
        console.log(params);
        if (params.data.categoryId) {
          this.$router.push(`/Category/Share?classId=${params.data.categoryId}`);
        }
      });

    },

    //获取分类数据
    getData() {
      let categoryList=[];
      let categoryCount=[];
      getCategoryList().then(res => {
        let newData=[]
        categoryList = res;
        getCategoryCount().then(response => {
          categoryCount = response;
          categoryList.forEach(category => {
            const matchingCount = categoryCount.find(count => count.categoryId === category.id);
            if (matchingCount) {
              newData.push({
                categoryId:category.id,
                name: category.name,
                value: matchingCount.categoryCount
              });
            }
          });
          this.getShowData=newData
          console.log(this.getShowData)
          this.drawPie()
        })
      })
    }

  }
}
</script>
